import React from "react";
// import './index.css';
import ProductCard from "../../../../Component/ProductCard";
import {Button} from "antd";
import PriceTag from "../../../../Component/PriceTag";
import CarouselBig from "../../../../Component/CarouselBig";
import Protrait from "../../../../Component/Protrait";
import Blank from "../../../../Component/Blank";
import ColorBox from "../../../../Component/ColorBox";
import Message from "../../../../Common/svg/Message";
import Heart from "../../../../Common/svg/Heart";
import MessageUtil from "../../../../utils/MessageUtil";
import TransactionServer from "../../../../Server/Trade/TransactionServer";
import URL from "../../../../Server/URL";

export default class extends React.Component{
    testLogo="http://39.100.3.34:8888/fly/2de6a15c0dc34c398272e2d6eecf266d.jpg";
    constructor(props){
        super();

        let id=props.match.params.id;
        let shopType=props.match.params.shopType;

        this.state={
            hired:props.hired,
            sellerName:"",
            seled:false,
            id,
            shopType:shopType,//商品类型 0二手飞行器 1二手配件 2租赁飞行器 3租赁配件
            droneImg:"",
            price:"",
            brand:"",
            droneType:"",
            model:"",
            sn:"",
            title:"",
            cashDeposit:false,
            isInsurance:false,
            canBargain:false,

            
        }

        this.Gen();
    }
    componentDidMount(){
        MessageUtil.ChangeHeight();
    }
    Gen(){
        TransactionServer.TransactionSelectShopDetails(this.state.shopType,
            this.state.id)
            .then(res=>{
                let data=res.data;
                console.log(res)
                this.setState({
                    // sellerName:"",
                    droneImg:URL.GetURL(data.aerocraftImgUrl),
                    price:data.price,
                    brand:data.aerocraftBrand,
                    droneType:data.aerocraftType,
                    model:data.aerocraftModel,
                    sn:data.aerocraftSn,
                    title:data.title,
                    cashDeposit:data.cashDeposit>0,
                    isInsurance:data.insuranceStatus==="0",
                    canBargain:data.bargain==="1"
                })
            });
    }
    render(){
        let status=this.state.canBargain?
        <ColorBox color="#FF626A" text="可议价"/>
        :"";

        // let time="租用时间：201909/23-2019/10-03";

        let badge=[];
        if(this.state.isInsurance){
            badge.push(
                <img alt="Insurance" src="/assets/Good/Insurance.png"/>,
            )
        }
        if(this.state.isMoney){
            badge.push(
                <img alt="GuaranteeMoney" src="/assets/Good/GuaranteeMoney.png"/>
            )
        }
        return(
            <div className="HireServiceDetail Courseware_Body">
                <div className="HireServiceDetail_User flexContainer">
                    <Protrait src={this.testLogo}/>
                    <span className="HireServiceDetail_User_Name">{this.state.sellerName}</span>
                    <span className="HireServiceDetail_User_State">{status}</span>
                    {/* <span className="HireServiceDetail_User_State">{time}</span> */}
                    <Blank/>
                    <span className="HireServiceDetail_User_Collet"><span className="HireServiceDetail_User_Collet_SVG"><Heart/></span>收藏</span>
                    <span className="HireServiceDetail_User_Comment"><span className="HireServiceDetail_User_Collet_SVG"><Message/></span>留言</span>
                </div>
                <ProductCard
                    title={this.state.title}
                    subtitle={["品牌："+this.state.brand, "类型："+this.state.droneType,
                        "型号："+this.state.model,"sn号："+this.state.sn]}
                    badge={badge}
                    priceText={<PriceTag  price={this.state.price} unit={"天"}/>}
                />
                <p className="GrayBGContainer">
                新浪图片频道:以图为媒,速递新闻;在这里,每天看“有温度的视觉”。频道致力于成为中国报道摄影师成长平台。以影像记录中国,发掘历史,感知世界。品牌栏目有新浪图片频道:以图为媒,速递新闻;在这里,每天看“有温度的视觉”。频道致力于成为中国报道摄影师成长平台。以影像记录中国,发掘历史,感知世界。品牌栏目有新浪图片频道:以图为媒,速递新闻;在这里,每天看“有温度的视觉”。频道致力于成为中国报道摄影师成长平台。以影像记录中国,发掘历史,感知世界。
                </p>
                 <CarouselBig img={this.state.droneImg}/>
                {/*<div className="HireServiceDetail_Comment">
                    <div><CoursewareSvg fill="#333"/><span className="HireServiceDetail_CommentTitle">买家留言</span></div>
                    <div>
                        <Comment portrait={this.testLogo} 
                        name="ives" time="2020-9-2" text="测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论" />
                        <Comment isReply={true} portrait={this.testLogo} 
                        name="ives" time="2020-9-2" text="测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论" />
                    </div>
                </div> */}

                <div className="HireServiceDetail_Bottom">
                    <a href={"/trade/secondHandCommit/"+this.state.id+"/"+this.state.shopType} alt="buy">
                        <Button style={{width:"12rem"}} type="primary" 
                        shape="round" size="large">
                            立刻购买
                        </Button>
                    </a>
                </div>
            </div>
            
        )
    }
}